<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container">
        <!-- 顶部 -->
        <div class="nav">
            <span class="magnifier"></span>
            <input type="text" placeholder="搜索:目的地/酒店/经典/航班号">
            <div>
                <span class="myIcon"></span>
                <span class="my">我&nbsp;的</span>
            </div>

        </div>

        <!-- 轮播图 -->
        <div class="lunbotu">
            <div class="imgList">
                <img src="./images/banner05.jpg">
                <img src="./images/banner01.jpg">
                <img src="./images/banner02.jpg">
                <img src="./images/banner03.jpg">
                <img src="./images/banner04.jpg">
                <img src="./images/banner05.jpg">
                <img src="./images/banner01.jpg">
            </div>
            <div class="dot">
                <ul>
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

        <!-- 攻略 -->
        <div class="introduction">
            <ul>
                <li>攻略·经典</li>
                <li>门票·玩乐</li>
                <li>美食林</li>
                <li>周边游</li>
                <li>一日游</li>
            </ul>
        </div>

        <!-- 酒店类 -->
        <div class="hotel">
            <ul>
                <li><span>酒店</span><span class="hotel"></span></li>
                <li><span>民宿·客栈</span></li>
                <li><span>火车票</span></li>
                <li><span class="jhj">机票</span></li>
                <li><span class="flight">机票</span></li>
                <li><span>火车票</span></li>
                <li><span>汽车·船票</span></li>
                <li><span>专车·租车</span></li>
                <li><span class="travel">旅游</span></li>
                <li><span>高铁游</span></li>
                <li><span>邮轮游</span></li>
                <li><span>定制游</span></li>
            </ul>
        </div>

        <!-- 自由行部分 -->
        <div class="random">
            <ul>
                <li><span></span>自由行</li>
                <li><span></span>WiFi电话卡</li>
                <li><span></span>保险·签证</li>
                <li><span></span>换钞·购物</li>
                <li><span></span>当地向导</li>
                <li><span></span>特价机票</li>
                <li><span></span>礼品卡</li>
                <li><span></span>申卡·借钱</li>
                <li><span></span>旅拍NEW</li>
                <li><span></span>更多</li>
            </ul>
        </div>
        <!-- 特卖惠部分 -->
        <div class="sale clearfix">
            <div class="saleTop">
                <span class="teSale"></span>
                <span class="more">更多&nbsp;></span>
            </div>
            <div class="saleLeft fl">
                <img src="./images/pic-tmh-01.jpg">
                <p class="introduce">三亚5日自由行(5钻)·节后错峰款【高星度假型酒店合辑·4晚连住】预订赠出行礼遇·网红酒店|唯美海滩|亲子宅玩|海鲜盛宴|惬意泳池|热剧取景地·暖秋当红旅行地
                    累计超6万人真实出行！</p>
                <p class="price">￥1504起</p>
            </div>
            <div class="saleRight fr">
                <div class="top">
                    <div>
                        <p>千款特价</p>
                        <p>走过路过不错过</p>
                    </div>
                    <span></span>
                </div>
                <div class="bottom clearfix">
                    <div class="fl">
                        <div>
                            <p>境外精选</p>
                            <p>限时抢购</p>
                        </div>
                        <span></span>
                    </div>
                    <div class="fr">
                        <div>
                            <p>周边玩乐</p>
                            <p>欢乐度周末</p>
                        </div>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 热门活动部分 -->
        <div class="hot">
            <div class="hotTop">
                <span class="teHot"></span>
                <span class="advertisement"></span>
                <span class="more">获取更多福利&nbsp;></span>
            </div>
            <div class="hotMiddle">
                <div><img src="./images/huodong01.png"></div>
                <div><img src="./images/huodong02.png"></div>
            </div>
            <div class="hotBottom">
                <div><img src="./images/huodong03.jpg"></div>
                <div><img src="./images/huodong04.jpg"></div>
                <div><img src="./images/huodong05.jpg"></div>
                <div><img src="./images/huodong06.jpg"></div>
            </div>
        </div>

        <div class="bottom">
            <div class="bottomTop">
                <div>
                    <span></span>
                    <p>电话预订</p>
                </div>
                <div>
                    <span></span>
                    <p>下载客户端</p>
                </div>
                <div>
                    <span></span>
                    <p>我 的</p>
                </div>
            </div>
            <div class="map">
                <p>网站地图｜ Language｜ 电脑版</p>
                <p>©2019粤嵌H5前端开发｜粤ICP备XXXXXXXX号-XXXXXX</p>
            </div>
        </div>
    </div>

    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>